<template>
  <div>
    <el-row class="tac">
      <el-col>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item
            v-for="(item,index) in menuItems"
            :key="index"
            :index="index.toString()"
            @click="changeVideoCategory(index)"
          >
            <!-- <i class="el-icon-location"></i> -->
            {{item.title}}</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "navMenu",
  data() {
    return {
      activeIndex: "0",
      menuItems: [
        {
          title: "首页",
          key: "1",
          path: "",
        },
        {
          title: "推荐",
          key: "2",
          path: "",
        },
        {
          title: "关注",
          key: "3",
          path: "",
        },
        {
          title: "朋友",
          key: "4",
          path: "",
        },
        {
          title: "我的",
          key: "4",
          path: "",
        },
        {
          title: "直播",
          key: "4",
          path: "",
        },
        {
          title: "放映厅",
          key: "4",
          path: "",
        },
        {
          title: "知识",
          key: "4",
          path: "",
        },
        {
          title: "热点",
          key: "4",
          path: "",
        },
      ],
    };
  },
  async mounted() {
    let result = await this.$API.reqNavMenu();
    if (result.code == 200) {
      this.menuItems = result.data;
    }
  },
  methods: {
    changeVideoCategory(index) {
      console.log(index);
      this.activeIndex = index.toString();
    },
  },
};
</script>

<style>
</style>